<template>
    <div style="background-color: rgb(123, 240, 100);">
        <h1>我是父组件1</h1>
        <h3>1.局部组件注册</h3>
        <ButtonCounter/>
        <h3>2.全局组件注册，无需再本页面中注册，再main.jsp中进行全局注册，此页面中直接使用即可</h3>
        <DoubleCounter/>
        <h3>3.使用kebab-case注册组件</h3>
        <button-counter></button-counter>
        <h4>4.常量数据传递给子组件</h4>
        <SonOne toSon="陈烨，你有没有再好好学习前端知识?"/>
        <h3>5.传递数组数据给子组件</h3>
        <SonOne :grades="grades"></SonOne>
        <h3>6.多数据传值</h3>
        <SonOne toSon="陈烨，你有没有再好好学习前端知识?" :grades="grades"/>
        <h3>7.使用变量传值</h3>
        <SonOne toSon="陈烨，你有没有再好好学习前端知识?" :grades="grades" :msg="msg"/>
    </div>
</template>

<script setup>

import ButtonCounter from '../components/ButtonCounter.vue';
import SonOne from "../components/SonOne.vue";

import {ref} from "vue"
const grades = ref([{id:1,grade:90},{id:2,grade:70},{id:3,grade:50}])
const msg=ref('你怎么越考越差！！！')
</script>



<style>



</style>